<template>
  <div>
    <el-button @click="getWidthY('2023','20')">一年当时的第几个月</el-button>
    <el-row>
      <el-table border :data="form.tMilestonePlanList" class="cell-style-self progress-img"  ><!-- :cell-class-name="clearPadding"-->
        <el-table-column label="序号" prop="index" header-align="center" align="center" min-width="80"  fixed>
          <template slot-scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column label="里程碑计划名称" header-align="center" align="left" min-width="250" fixed
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <template><span style="display: inline-block;padding-left: 8px"></span>{{ scope.row.milestoneName }}</template>
          </template>
        </el-table-column>
        <el-table-column :label="column.year" header-align="center" align="center" v-for="column in form.columnHeader" :key="column.year" >
          <el-table-column width="60" align="center"
                           :prop="`${column.year}${month}`" :label="`${month}月`" :key="`${column.year}${month}`" v-for="month in column.months">
            <template slot-scope="scoped">
              <div style="display: flex;flex-wrap:nowrap;align-items: center;height: 100%;width: 100%;justify-content: flex-end">
                        <span :style="{display: 'inline-block',height:'20px',width:getWidth(column.year,month)}" :class="{ 'progress-blue': getIsActive(column.year,month,day,scoped.row,'byMonth') }" :key="day"  v-for="day in getDaysEveryMonth(column.year,month)">
                       </span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="margin-top:10px">
      <el-table border :data="form.tMilestonePlanList" class="cell-style-self progress-img"  ><!-- :cell-class-name="clearPadding"-->
        <el-table-column label="序号" prop="index" header-align="center" align="center" width="80"  fixed>
          <template slot-scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column label="里程碑计划名称" header-align="center" align="left" width="250" fixed
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <template><span style="display: inline-block;padding-left: 8px"></span>{{ scope.row.milestoneName }}</template>
          </template>
        </el-table-column>
<!--        <el-table-column :label="column.year" header-align="center" align="center" v-for="column in form.columnHeader" :key="column.year" >
            <template slot-scope="scoped">
             <div style="display: flex;flex-wrap: nowrap;width: 100%" >
                <span :style="{display: 'flex',height:'20px',width:getWidth(column.year,month,'m')}" v-for="month in months" :key="`${column.year}${month}`">
                  <span :style="{display: 'inline-block',height:'20px',width:getWidth(column.year,month)}" :class="{ 'progress-blue': getIsActive(column.year,month,day,scoped.row) }" :key="`${column.year}${month}${day}`"  v-for="day in getDaysEveryMonth(column.year,month)"></span>
              </span>
             </div>
            </template>
        </el-table-column>-->
        <el-table-column :label="column.year" header-align="center" align="center" v-for="column in form.columnHeader" :key="column.year" >
            <template slot-scope="scoped">
             <div style="display: flex;flex-wrap: nowrap;width: 100%" >
                <span :style="{flex:1,height:'20px',display:'inline-block',width:getWidthY(column.year)}"
                      :class="{ 'progress-blue': getIsActiveY(column.year,`${day}`,scoped.row) }"
                      v-for="day in getYearAllDays(column.year)"
                      :key="`${column.year}${day}`"> </span>
<!--                      {{ getYMDbyDays(column.year,day)}}-->

             </div>
            </template>
        </el-table-column>
      </el-table>
    </el-row>

  </div>
</template>
<script>
export default {
  name:'list-index',
  components:{
  },
  watch: {

  },
  methods: {
    getYMDbyDays(year,dayNumInEveryYear){
      let date = new Date(year+'-01-01') ;
      date.setDate(Number(dayNumInEveryYear))
      let mm =  date.getMonth()+1 ;
       mm = (mm < 10 ? '0' : '') + mm
      let dd = date.getDate() < 10 ? "0" + date.getDate() :  date.getDate() ;
      return year + '-' + mm + "-" + dd ;
    },
    getWidthY(year){//将一个单元格平均分成365份
      let daysEveryYear = this.getYearAllDays(Number(year)) ;//每年有多少天
      return (1/daysEveryYear*100).toFixed(5)+"%";
    },


    getWidth(year,month,type){
     // if (!(year||month))  return (1/12*100).toFixed(4)+"%";
      let daysNum = this.getDays(year,month) ;
      let allDaysYear = this.getYearAllDays(Number(year)) ;
      if (type == 'm'){
        return (daysNum/allDaysYear*100).toFixed(2)+"%";
      }

      let data = 1/daysNum ;
      return (data*100).toFixed(2)+"%";
    },
    getIsActive(year,month,day,rowData){
      if (!(rowData.beginDate || rowData.endDate)){
        return false ;
      }
      let curDate = year+'-'+month+'-'+day ;
      return new Date(rowData.beginDate) <= new Date(curDate).getTime() && new Date(rowData.endDate) >= new Date(curDate).getTime();
    },
    getIsActiveY(year,dayNumInEveryYear,rowData){
      if (!(rowData.beginDate || rowData.endDate)){
        return false ;
      }
      let curDate = this.getYMDbyDays(year,dayNumInEveryYear) ;
      return new Date(rowData.beginDate) <= new Date(curDate).getTime() && new Date(rowData.endDate) >= new Date(curDate).getTime();
    },
    getYearAllDays(year) {
      let leapYear = false, sum_day = 0, month_arr = [4, 6, 9, 11];
      if (year % 100 === 0) { // 年份是整百
        leapYear = year % 400 === 0
      } else {
        leapYear = year % 4 === 0
      }
      // 下面计算每个月的天数
      for (let i = 1; i < 13; i++) {
        if (i === 2) {
          sum_day += leapYear ? 29 : 28
        } else if (month_arr.includes(i)) {
          sum_day += 30
        } else {
          sum_day += 31
        }
      }
      return sum_day
    },
    getDays(years,mons){
      //第一位是0去掉
      years = Number(years) ;
      if(mons.charAt(0) == '0'){
        mons = mons.substring(1, mons.length);
      }
      mons = Number(mons)
      let arr=[]
      if(years%4 == 0 && years%100 != 0 || years%400 == 0){
        arr=[31,29,31,30,31,30,31,31,30,31,30,31]
      }else{
        arr=[31,28,31,30,31,30,31,31,30,31,30,31]
      }
      return arr[mons-1]
    },
    getDaysEveryMonth(year,month){
      let days = this.getDays(year,month) ;
      // console.log("days:",days);

      let daysBlank = new Array(days).fill('');
      let daysFill = [] ;
      daysBlank.map((it,index)=>{
        daysFill.push(index+1 < 10 ? '0'+(index+1) : ''+(index+1))
      })
      return daysFill ;
    },
    getDayNum(year,month){
      year = Number(year)
      month = Number(month)
      let days = 0;
      for (let i = 1; i < month; i++) {
        //判断月份
        if (i === 1 || i === 3 || i === 5 || i === 7 || i === 8 || i === 10 || i === 12) {
          days += 31;
        } else if (i === 4 || i === 6 || i === 9 || i === 11) {
          days+=30;
        }else {
          //判断平年闰年
          if (year%4===0&&year%100!==0 ||year%400===0){
            days+=29;
          }else {
            days+=28;
          }
        }
      }
      return days ;
    },

  },

  data() {
    return {
      isActive:false,
      months:['01','02','03','04','05','06','07','08','09','10','11','12'],
      form:{
        columnHeader:[
            {year:'2020',prop:'2020',months:['10','11','12']},
          {year:'2021',prop:'2021',months:['01','02','03','04','05','06','07','08','09','10','11','12']},
          {year:'2022',prop:'2022',months:['01','02','03','04','05','06','07','08','09','10','11','12']},
          {year:'2023',prop:'2023',months:['01','02','03','04','05','06','07','08','09','10','11','12']},
          {year:'2024',prop:'2024',months:['01','02','03','04','05','06','07','08','09','10']}],
        tMilestonePlanList:[{
          "id": "129",
          "milestoneName": "里碑4",
          "beginDate": "2020-10-12",
          "endDate": "2022-05-15",
          "projectId": "168",
          "createUser": null,
          "createDate": null,
          "updateUser": null,
          "updateDate": null,
          "tpid": null,
         },
          {
          "id": "128",
          "milestoneName": "里碑3",
          "beginDate": "2021-10-01",
          "endDate": "2022-10-12",
          "remark": "里碑3",
          "projectId": "168",
          "createUser": null,
          "createDate": null,
          "updateUser": null,
          "updateDate": null,
          "tpid": null,
        }, {
          "id": "126",
          "milestoneName": "里碑1",
          "beginDate": "2021-10-01",
          "endDate": "2022-10-31",
          "remark": "里碑1",
          "projectId": "168",
          "createUser": null,
          "createDate": null,
          "updateUser": null,
          "updateDate": null,
          "tpid": null,
        }, {
          "id": "127",
          "milestoneName": "里碑2",
          "beginDate": "2022-10-18",
          "endDate": "2022-10-31",
          "remark": "里碑2",
          "projectId": "168",
          "createUser": null,
          "createDate": null,
          "updateUser": null,
          "updateDate": null,
          "tpid": null,
        }, {
            "id": "128",
            "milestoneName": "里碑2",
            "beginDate": "2022-10-18",
            "endDate": "2024-10-31",
            "remark": "里碑2",
            "projectId": "168",
            "createUser": null,
            "createDate": null,
            "updateUser": null,
            "updateDate": null,
            "tpid": null,
          }
          ]
      },
    };
  }
};
</script>

<style lang="less" >
.cell-style-self.el-table td,
.cell-style-self.el-table td,
.cell-style-self.el-table td .cell {
  //padding-right: 0;
  //padding-left: 0;

}
/*.progress-img /deep/.el-table .cell{padding-right: 0px!important;padding-left: 0!important;}*/
.progress{display: inline-block;background: #C5E9F9;height: 80%}
//.clearPadding {
//  padding-right: 0px!important;padding-left: 0!important;
//}

//.el-table td.el-table__cell div {padding-right: 0px!important;padding-left: 0!important;}
.progress-blue{background:#C5E9F9 }
</style>